<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../00_static/js/vue.js" type="text/javascript"></script>
    <title>事件处理</title>
</head>

<body>
    <div id="app">
        <!-- 绑定事件 -->
        <button @click="show1">点我打印信息1</button><br><br>

        <!-- 绑定事件-传递参数 -->
        <button @click="show2($event,666)">点我打印信息2-传递参数</button><br><br>

        <!-- 绑定事件-阻止默认行为 -->
        <a href="https://www.baidu.com" @click.prevent="show3">点我打印信息3-阻止默认行为</a><br><br>

        <!-- 绑定事件-阻止冒泡 -->
        <div @click="show4">
            <a href="https://www.baidu.com" @click.stop.prevent="show4">点我打印信息4-阻止冒泡</a><br><br>
        </div>

        <!-- 键盘事件 -->
        <input @keyup.13="show5" type="text" placeholder="按下回车提示数据"><br>
        <input @keyup.37="show5" type="text" placeholder="按下左箭头提示数据"><br>
        <input @keyup.enter="show5" type="text" placeholder="按下回车提示数据"><br>

    </div>

    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {},
            methods: {
                show1() {
                    console.log(this)
                    console.log('信息1')
                },
                show2(event, number) {
                    console.log(event)
                    console.log('信息2：' + number)
                },
                show3() {
                    console.log('信息3')
                },
                show4() {
                    // event.stopPropagation();  //手动阻止冒泡
                    console.log('信息4')
                },
                show5() {
                    console.log(event.key)
                    console.log(event.keyCode)
                }
            }
        })
    </script>
</body>

</html>